<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
    <p>搜索<input type="text" v-model="goodInfo.search"/></p>
</div>
<script>
  const vm = new Vue({
    el:"#app",
    data(){
      return{
        goodInfo:{
            search:"oppo",
            price:123,
            num:10
        }
      }
    },
    watch:{
      goodInfo: {
          //立即监听
          immediate:true,
          //深度监听
          deep:true,
          //handler(newVal,oldVal)监听回调函数,两个参数新值和旧值
          //如果监听的是一个对象,新值和旧值一样
          handler(newVal,oldVal){
              console.log("goodInfo发生改变",newVal,oldVal)
          }
      }
    }
  })
</script>
</body>
</html>